.banners {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--space-s);

    .banners__banner {
        position: relative;
        min-height: 300px;
        width: 100%;
        max-width: 1360px;
        max-height: 400px;
        padding: var(--space-s);
        display: flex;
        align-items: center;
        background-color: #dadada;
        gap: var(--space-m);
    }

    .banners__background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-position: left;
        object-fit: cover;
        z-index: 0;
    }

    .banners__content {
        display: flex;
        flex-direction: column;
        z-index: 1;
    }

    .banners__buttons {
        display: flex;
    }

    .banners__image {
        position: absolute;
        right: 0;
        width: auto;
        max-width: 40%;
        object-fit: contain;
        z-index: 1;
    }
}

@media only screen and (max-width: 996px) {
    .banners {
        .banners__banner {
            max-height: fit-content;
        }

        .banners__text {
            font-size: var(--step--1);
            line-height: var(--step-0);
        }
    }
}

@media only screen and (max-width: 768px) {
    .banners {
        .banners__content {
            max-width: 100% !important;
        }

        .banners__image {
            display: none;
        }
    }
}